<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>注册</title>
</head>
<style>
	body{
			background: #74ebd5;
			background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);
			background: linear-gradient(to right, #ACB6E5, #74ebd5);
			text-align: center;

	}
		.head{
			height: 200px;
		}
		h1{
			color:black;
			font-family: "Impact", Charcoal, sans-serif;
		}
		form{
			height: 90px;
		}
		a:link{
			text-decoration: none;
		}
		a:visited{
			text-decoration: none;
		}
		a:hover{
			text-decoration: underline;
		}
		a:active{
			text-decoration: underline;
		}
		.error{
			color: red;
			font-size: 13px;
		}
		button{
			line-height:30px;
			height:30px;
			width:131px;
			color:#ffffff;
			background-color:#4a8cf7;
			font-size:16px;
			font-weight:normal;
			font-family:Arial;
			border:0px solid #dcdcdc;
			-webkit-border-top-left-radius:3px;
			-moz-border-radius-topleft:3px;
			border-top-left-radius:3px;
			-webkit-border-top-right-radius:3px;
			-moz-border-radius-topright:3px;
			border-top-right-radius:3px;
			-webkit-border-bottom-left-radius:3px;
			-moz-border-radius-bottomleft:3px;
			border-bottom-left-radius:3px;
			-webkit-border-bottom-right-radius:3px;
			-moz-border-radius-bottomright:3px;
			border-bottom-right-radius:3px;
			-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
			-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
			box-shadow: inset 0px 0px 0px 0px #ffffff;
			text-align:center;
			display:inline-block;
			text-decoration:none;
		}
		button:hover{
			background-color:#4a6bf7;
		}
</style>
	<script>
		function reg(){
			var xhr=x=new XMLHttpRequest();//创建一个 XMLHttpRequest请求的对象
			var url="";
			var user=document.getElementById("user").value;
			var password=document.getElementById("password").value;
			if(!user||!password){
				window.alert("用户名和密码不能为空");
				return;
			}
			var data="reg user="+user+" password="+password;//获取user和password
			//配置POST请求
			xhr.open("POST",url,true);	//配置请求：方法,url,是否异步请求
			xhr.onreadystatechange=function()
				{
					if(xhr.status>=200&&xhr.status<300){
						if(xhr.responseText=="False"){
								document.getElementById("error").innerHTML="用户已存在";
						}
						else if(xhr.responseText=="Sucess"){
								document.cookie=+user;
								path="/index.html";
								window.location.assign("/index.html");
						}
					}else{
						console.error('Error:', xhr.statusText);
					}
			}
			xhr.send(JSON.stringify(data));
		}
	</script>
	<script>
		function form(){
				var password=document.getElementById("password").value;
				var repassword=document.getElementById("repassword").value;
				if(repassword!=password){
					document.getElementById("error").innerHTML="密码不一致";
					document.getElementById("button").style.opacity="0.6";
					document.getElementById("button").style.cursor="not-allowed";
					document.getElementById("button").onclick="";
				}else{
					document.getElementById("error").innerHTML="";
					document.getElementById("button").style.opacity="1";
					document.getElementById("button").style.cursor="";
					document.getElementById("button").onclick=reg;
				}
			}
	</script>
<body>
	<div class="head"></div>
	<h1>欢迎来到我的网盘</h1>
	<form method="post" onclick="form()">
			<input type="text" name="user" id="user" placeholder="请输入用户名"><br>
			<input type="password" name="password" id="password" placeholder="请输入密码"><br>
			<input type="password" name="repassword" id="repassword" placeholder="请再次输入密码"><br>
			<div class="error" id="error"></div>
	</form>
	<button type="button" id="button" onclick="reg()">注册</button><br>
	<p>
		如果有账户请
		<a href="/login.html">登录</a>
	</p>
</body>
</html>